﻿@page "/components/grid"

<PageHeader Title="Grid 栅格">
    栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
</PageHeader>

<Example Title="基本使用">
    <Description>
        每一行由12个单列组成。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
        <Row>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>            
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
            <Column>1</Column>
        </Row>
        <Row>
            <Column Span="ColumnSpan.Is2">2</Column>
            <Column Span="ColumnSpan.Is2">2</Column>
            <Column Span="ColumnSpan.Is2">2</Column>
            <Column Span="ColumnSpan.Is2">2</Column>
            <Column Span="ColumnSpan.Is2">2</Column>
            <Column Span="ColumnSpan.Is2">2</Column>
        </Row>
        <Row>
            <Column Span="ColumnSpan.Is3">3</Column>
            <Column Span="ColumnSpan.Is3">3</Column>
            <Column Span="ColumnSpan.Is3">3</Column>
            <Column Span="ColumnSpan.Is3">3</Column>
        </Row>
        <Row>
            <Column Span="ColumnSpan.Is4">4</Column>
            <Column Span="ColumnSpan.Is4">4</Column>
            <Column Span="ColumnSpan.Is4">4</Column>
        </Row>
        <Row>
            <Column Span="ColumnSpan.Is6">6</Column>
            <Column Span="ColumnSpan.Is6">6</Column>
        </Row>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Row>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>            
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
    <Column>1</Column>
</Row>
<Row>
    <Column Span=""ColumnSpan.Is2"">2</Column>
    <Column Span=""ColumnSpan.Is2"">2</Column>
    <Column Span=""ColumnSpan.Is2"">2</Column>
    <Column Span=""ColumnSpan.Is2"">2</Column>
    <Column Span=""ColumnSpan.Is2"">2</Column>
    <Column Span=""ColumnSpan.Is2"">2</Column>
</Row>
<Row>
    <Column Span=""ColumnSpan.Is3"">3</Column>
    <Column Span=""ColumnSpan.Is3"">3</Column>
    <Column Span=""ColumnSpan.Is3"">3</Column>
    <Column Span=""ColumnSpan.Is3"">3</Column>
</Row>
<Row>
    <Column Span=""ColumnSpan.Is4"">4</Column>
    <Column Span=""ColumnSpan.Is4"">4</Column>
    <Column Span=""ColumnSpan.Is4"">4</Column>
</Row>
<Row>
    <Column Span=""ColumnSpan.Is6"">6</Column>
    <Column Span=""ColumnSpan.Is6"">6</Column>
</Row>
```
")
    </CodeContent>
</Example>
<Example Title="区块间隔">
    <Description></Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
        <Row Gutter="24">
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
            <Column Span="ColumnSpan.Is3">col-3</Column>
        </Row>
        
        <Row Gutter="36">
            <Column Span="ColumnSpan.Is4">col-4</Column>
            <Column Span="ColumnSpan.Is4">col-4</Column>
            <Column Span="ColumnSpan.Is4">col-4</Column>
            <Column Span="ColumnSpan.Is4">col-4</Column>
            <Column Span="ColumnSpan.Is4">col-4</Column>
            <Column Span="ColumnSpan.Is4">col-4</Column>
        </Row>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Row Gutter=""24"">
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
</Row>
        
<Row Gutter=""36"">
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
</Row>
```
")
    </CodeContent>
</Example>
<Example Title="左右偏移">
    <Description></Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <Row>
                <Column Span="ColumnSpan.Is4">col-4</Column>
                <Column Span="ColumnSpan.Is4" Offset="ColumnSpan.Is4">col-4 offset-4</Column>
            </Row>
            <Row>
                <Column Span="ColumnSpan.Is3">col-3</Column>
                <Column Span="ColumnSpan.Is3" Offset="ColumnSpan.Is3">col-3 offset-3</Column>
            </Row>
            <Row>
                <Column Span="ColumnSpan.Is6" Offset="ColumnSpan.Is3">col-6 offset-3</Column>
            </Row>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Row>
    <Column Span=""ColumnSpan.Is4"">col-4</Column>
    <Column Span=""ColumnSpan.Is4"" Offset=""ColumnSpan.Is4"">col-4 offset-4</Column>
</Row>
<Row>
    <Column Span=""ColumnSpan.Is3"">col-3</Column>
    <Column Span=""ColumnSpan.Is3"" Offset=""ColumnSpan.Is3"">col-3 offset-3</Column>
</Row>
<Row>
    <Column Span=""ColumnSpan.Is6"" Offset=""ColumnSpan.Is3"">col-6 offset-3</Column>
</Row>
```
")
    </CodeContent>
</Example>
<Example Title="排序">
    <Description>
        <code>Push</code> 表示向右边移动的距离，<code>Pull</code> 表示向左边移动的距离。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <Row>
                <Column Push="ColumnSpan.Is6" Span="ColumnSpan.Is5">col-5 push-6</Column>
                <Column Pull="ColumnSpan.Is4" Span="ColumnSpan.Is3">col-3 pull-4</Column>
            </Row>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Row>
    <Column Push=""ColumnSpan.Is6"" Span=""ColumnSpan.Is5"">col-5 push-6</Column>
    <Column Pull=""ColumnSpan.Is4"" Span=""ColumnSpan.Is3"">col-3 pull-4</Column>
</Row>
```
")
    </CodeContent>
</Example>
<Example Title="次序">
    <Description>
        无论 <code>Column</code> 如何排列，都将按照 <code>Order</code> 的顺序依次排序。
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <Row>
                <Column Span="ColumnSpan.Is3" Order="ColumnSpan.Is4">col-3 order-4</Column>
                <Column Span="ColumnSpan.Is3" Order="ColumnSpan.Is2">col-3 order-2</Column>
                <Column Span="ColumnSpan.Is3" Order="ColumnSpan.Is3">col-3 order-3</Column>
                <Column Span="ColumnSpan.Is3" Order="ColumnSpan.Is1">col-3 order-1</Column>
            </Row>
            </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Row>
    <Column Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is4"">col-3 order-4</Column>
    <Column Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is2"">col-3 order-2</Column>
    <Column Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is3"">col-3 order-3</Column>
    <Column Span=""ColumnSpan.Is3"" Order=""ColumnSpan.Is1"">col-3 order-1</Column>
</Row>
```
")
    </CodeContent>
</Example>
<Example Title="水平对齐">
    <Description>
        设置 <code>HorizontalAlignment</code> 水平排版 <code>Row</code> 的单元格，支持 flex 的 justify-content
    </Description>
    <RunContent>
        <div class="tdesign-demo-item--grid">
            <p>align left</p>
            <Row>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
            </Row>
            
            <p>align center</p>
            <Row HorizontalAlignment="JustifyContent.Center">
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
            </Row>
            
            <p>align right</p>
            <Row HorizontalAlignment="JustifyContent.End">
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
            </Row>
            <p>spance between</p>            
            <Row HorizontalAlignment="JustifyContent.Between">
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
            </Row>
            <p>spance around</p>            
            <Row HorizontalAlignment="JustifyContent.Around">
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
                <Column Span="ColumnSpan.Is2">col-2</Column>
            </Row>
        </div>
    </RunContent>
    <CodeContent>
@Code.Create(@"
```html
<p>align left</p>
<Row>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
</Row>
            
<p>align center</p>
<Row HorizontalAlignment=""JustifyContent.Center"">
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
</Row>
            
<p>align right</p>
<Row HorizontalAlignment=""JustifyContent.End"">
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
</Row>
<p>spance between</p>            
<Row HorizontalAlignment=""JustifyContent.Between"">
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
</Row>
<p>spance around</p>            
<Row HorizontalAlignment=""JustifyContent.Around"">
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
    <Column Span=""ColumnSpan.Is2"">col-2</Column>
</Row>
```
")
    </CodeContent>
</Example>
<Example Title="垂直对齐">
    <Description>
        设置 <code>VerticalAlignment</code> 垂直对齐 <code>Row</code> 的单元格
    </Description>
    <RunContent>
        
        <div class="tdesign-demo-item--grid">
            <p>align top</p>
            <Row>
                <Column Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </Column>
                <Column Span="ColumnSpan.Is3">
                    col-3
                </Column>                
                <Column Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </Column>
                <Column Span="ColumnSpan.Is3">
                    col-3
                </Column>
            </Row>
            <p>align middle</p>
            <Row VerticalAlignment="VerticalAlignment.Middle">
                <Column Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </Column>
                <Column Span="ColumnSpan.Is3">
                    col-3
                </Column>                
                <Column Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </Column>
                <Column Span="ColumnSpan.Is3">
                    col-3
                </Column>
            </Row>
            <p>align bottom</p>
            <Row VerticalAlignment="VerticalAlignment.Bottom">
                <Column Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </Column>
                <Column Span="ColumnSpan.Is3">
                    col-3
                </Column>                
                <Column Span="ColumnSpan.Is3">
                    <div style="height:100px">col-3</div>
                </Column>
                <Column Span="ColumnSpan.Is3">
                    col-3
                </Column>
            </Row>
        </div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<p>align top</p>
<Row>
    <Column Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </Column>
    <Column Span=""ColumnSpan.Is3"">
        col-3
    </Column>                
    <Column Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </Column>
    <Column Span=""ColumnSpan.Is3"">
        col-3
    </Column>
</Row>
<p>align middle</p>
<Row VerticalAlignment=""VerticalAlignment.Middle"">
    <Column Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </Column>
    <Column Span=""ColumnSpan.Is3"">
        col-3
    </Column>                
    <Column Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </Column>
    <Column Span=""ColumnSpan.Is3"">
        col-3
    </Column>
</Row>
<p>align bottom</p>
<Row VerticalAlignment=""VerticalAlignment.Bottom"">
    <Column Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </Column>
    <Column Span=""ColumnSpan.Is3"">
        col-3
    </Column>                
    <Column Span=""ColumnSpan.Is3"">
        <div style=""height:100px"">col-3</div>
    </Column>
    <Column Span=""ColumnSpan.Is3"">
        col-3
    </Column>
</Row>
```
")
    </CodeContent>
</Example>